<ul class="flex md:justify-between md:justify-start gap-6 text-sm text-white hover:[&_a]:opacity-50">
  <% if current_organization.twitter_handler.present? %>
    <li>
      <a target="_blank" data-external-link="text-only" rel="noopener noreferrer" href="https://twitter.com/<%= current_organization.twitter_handler %>">
        <span class="sr-only"><%= t("layouts.decidim.social_media_links.x", organization: current_organization_name) %></span>
        <%= icon "twitter-x-line", class: "w-8 h-8 fill-current", "aria-label": "X" %>
      </a>
    </li>
  <% end %>
  <% if current_organization.facebook_handler.present? %>
    <li>
      <a target="_blank" data-external-link="text-only" rel="noopener noreferrer" href="https://www.facebook.com/<%= current_organization.facebook_handler %>">
        <span class="sr-only"><%= t("layouts.decidim.social_media_links.facebook", organization: current_organization_name) %></span>
        <%= icon "facebook-fill", class: "w-8 h-8 fill-current", "aria-label": "Facebook" %>
      </a>
    </li>
  <% end %>
  <% if current_organization.instagram_handler.present? %>
    <li>
      <a target="_blank" data-external-link="text-only" rel="noopener noreferrer" href="https://www.instagram.com/<%= current_organization.instagram_handler %>">
        <span class="sr-only"><%= t("layouts.decidim.social_media_links.instagram", organization: current_organization_name) %></span>
        <%= icon "instagram-line", class: "w-8 h-8 fill-current", "aria-label": "Instagram" %>
      </a>
    </li>
  <% end %>
  <% if current_organization.youtube_handler.present? %>
    <li>
      <a target="_blank" data-external-link="text-only" rel="noopener noreferrer" href="https://www.youtube.com/<%= current_organization.youtube_handler %>">
        <span class="sr-only"><%= t("layouts.decidim.social_media_links.youtube", organization: current_organization_name) %></span>
        <%= icon "youtube-line", class: "w-8 h-8 fill-current", "aria-label": "YouTube" %>
      </a>
    </li>
  <% end %>
  <% if current_organization.github_handler.present? %>
    <li>
      <a target="_blank" data-external-link="text-only" rel="noopener noreferrer" href="https://www.github.com/<%= current_organization.github_handler %>">
        <span class="sr-only"><%= t("layouts.decidim.social_media_links.github", organization: current_organization_name) %></span>
        <%= icon "github-fill", class: "w-8 h-8 fill-current", "aria-label": "GitHub" %>
      </a>
    </li>
  <% end %>
</ul>
